<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大麦网-无缝轮播</title>
    <link rel="shortcut icon" href="http://img.alicdn.com/tfs/TB1RxAHSmrqK1RjSZK9XXXyypXa-16-16.ico" type="image/x-icon">
    <style>
    * {
    margin: 0;
    padding: 0;
    }
    
    ul {
    list-style: none;
    }
    a,img {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    }
    /* 容器================================================== */
    .w1200 {
        width:1200px;
        margin:0 auto 
    }
    #slides {
        position:relative;
        margin:0 auto;
        overflow:hidden;
    }
    #slides .slides_container, #slides .tab-pannel img {
        width:1200px;
        height:320px;
        overflow:hidden
    }
    #slides .slides_container{
        position: relative;
    }
    #list li {
    position: absolute;
    left: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in;
    background: #ddd;
    height:320px;
    }
    #list li.block {
    opacity: 1;
    }
    /* 容器==============================end==================== */

    /* banner左右button====================start============================== */
    #btn .next, #btn .prev {
        position:absolute;
        top:50%;
        margin-top:-32px;
        width:56px;
        height:64px;
        display:block;
        z-index:101;
        background:rgba(0, 0, 0, .5);
    }
    #btn a.prev {
    left: 0;
    }
    #btn a.next {
    right: 0;
    }
    /* 尖角符号 ------------------ */
    #btn .next .arrow, #btn .prev .arrow {
        position:absolute;
        right:24px;
        top:50%;
        display:inline-block;
        content:"";
        width:18px;
        height:18px;
        border:solid #fff;
        border-width:2px 2px 0 0;
        -webkit-transform:translate(0, -50%) rotate(45deg);
        transform:translate(0, -50%) rotate(45deg)
    }
    #btn .prev .arrow.left {
        left:24px;
        -webkit-transform:translate(0, -50%) rotate(-135deg);
        transform:translate(0, -50%) rotate(-135deg)
    }
    /* 尖角符号 ------------------ */
    #btn .next:hover, #btn .prev:hover {
        background:rgba(255, 18, 104, .5)
    }
    /* banner左右button=======================end=========================== */
    #slides .nav {
        position:absolute;
        right:32px;
        bottom:23px;
        z-index:99;
        cursor: pointer;
    }

    #option li {
    width:10px;
    height:10px;
    display:inline-block;
    margin-left:10px;
    border-radius: 50%;
    background: #fff;
    opacity:.32;
    }

    #option li.active {
    opacity:1;
    }
  
    </style>
</head>

<body>

    <div id="slides" id="slides" class="w1200">
<!-- ======================images========================= -->
        <ul id="list" data-spm="banner" class="slides_container">
            <li class="block" class="tab-pannel">
                <a data-spm="ditem_0" href="javascript:void(0)">
                    <img src="https://img.alicdn.com/tps/i4/TB1loV3V4YaK1RjSZFnSuu80pXa.jpg"  alt="">
                </a>
            </li>
            <li class="tab-pannel">
                <a data-spm="ditem_0" href="javascript:void(0)">
                    <img src="https://img.alicdn.com/tps/i4/TB1U5hJUNTpK1RjSZFKSuu2wXXa.jpg"  alt="">
                </a>
            </li>
            <li class="tab-pannel">
                <a data-spm="ditem_0" href="javascript:void(0)">
                    <img src="https://img.alicdn.com/tps/i4/TB1kQsRi13tHKVjSZSgSut4QFXa.jpg"  alt="">
                </a>
            </li>
        </ul>
<!-- ======================选项btn========================= -->
        <ul id="option" class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
<!-- ===================翻页btn============================ -->
        <div id="btn">
            <a href="#" class="prev">
                <div class="arrow left"></div>
            </a>
            <a href="#" class="next">
                <div class="arrow"></div>
            </a>
        </div>
    </div>

<script>
    class Fade {
        constructor(oListLi, oPtionLi, oBtn) {
            this.oListLi = oListLi;
            this.oPtionLi = oPtionLi;
            this.oBtn = oBtn;
            this.len = oPtionLi.length;
            this.index = 0;
        }
        init() {
            this.optionSwitch();
            this.btnSwitch();
        }

        optionSwitch() {
            for (let i = 0; i < this.len; i++) {
                this.oPtionLi[i].addEventListener("mouseover", () => {
                    this.oPtionLi[this.index].className = "";
                    this.oPtionLi[i].className = "active";
                    this.oListLi[this.index].className = "";
                    this.oListLi[i].className = "block";
                    this.index = i;
                })
            }
        }

        btnSwitch() {
            for (let i = 0; i < 2; i++) {
                this.oBtn[i].addEventListener("click", () => {
                    this.oPtionLi[this.index].className = "";
                    this.oListLi[this.index].className = "";
                    if (i) {
                        this.index++;
                        if (this.index == this.len) {
                            this.index = 0
                        }
                    } else {
                        this.index--;
                        if (this.index == -1) {
                            this.index = this.len - 1
                        }
                        console.log(this.index)
                    }
                    this.oPtionLi[this.index].className = "active";
                    this.oListLi[this.index].className = "block";
                })
            }
        }
    }

    class FadeChildren extends Fade {
        constructor(oListLi, oPtionLi, oBtn, wrap) {
            super(oListLi, oPtionLi, oBtn);
            this.wrap = wrap;
            this.timer = null;
        }
        init() {
            this.play();
            this.pause();
            this.optionSwitch();
            this.btnSwitch();
        }

        play() {
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                this.oPtionLi[this.index].className = "";
                this.oListLi[this.index].className = "";
                this.index++;
                if (this.index == this.len) {
                    this.index = 0
                }
                this.oPtionLi[this.index].className = "active";
                this.oListLi[this.index].className = "block";
            }, 2000)
        }

        pause() {
            this.wrap.addEventListener("mouseover", () => {
                clearInterval(this.timer);
            });
            this.wrap.addEventListener("mouseout", () => {
                this.play()
            })
        }
    }

    let oListLi = document.querySelectorAll("#list li");
    let oPtionLi = document.querySelectorAll("#option li");
    let oBtn = document.querySelectorAll("#btn a");
    let wrap = document.querySelector("#slides");
    console.log(oListLi, oPtionLi, oBtn);
    // new Fade(oListLi,oPtionLi,oBtn).init();
    new FadeChildren(oListLi, oPtionLi, oBtn, wrap).init()

</script>
</body>
</html>